<template>

<div class="all">
  <ul class="tab">
      <li class="tab-li zh">
          <a href="javascript:void(0)" class='tab-a tab-hj' v-on:click='getCp(18)'  :class=" type==18 ? 'tab-active':''">
              <span>黄金</span>
          </a>
      </li>
      <li class="tab-li kz">
          <a href="javascript:void(0)" class="tab-a tab-bj" v-on:click='getCp(20)' :class=" type==20 ? 'tab-active':''">
              <span>铂金</span>
          </a>
      </li>
      <li class="tab-li jg">
          <a href="javascript:void(0)" class="tab-a tab-by"  v-on:click='getCp(19)' :class=" type==19 ? 'tab-active':''">
              <span>白银</span>
          </a>
      </li>
      <li class="tab-li xl">
          <a href="javascript:void(0)" class="no-right tab-a search_key tab-zs" v-on:click='getCp(24)' :class=" type==24 ? 'tab-active':''">
              <span>钻石</span>
          </a>
      </li>
  </ul>
  <div class="products clearfix" id="goods">
    <router-link :to="{path:'/ycl_detail/'+item.goods_id}"  class="product-item" v-for='item in ycl_goods'>
      <div class="product-item-left">
          <div class="img materials">
              <img :src="base_url+item.original_img" alt="">
              <span>{{item.goods_name}}</span>
          </div>
      </div>
      <div class="product-item-right">
          <h5>{{item.goods_name}}</h5>
          <h6>{{item.goods_remark}}</h6>
          <div class="price">
              <span class="dj">¥
                  <em>{{item.ag_type}}</em>元/克
              </span>
          </div>
          <div class="other clearfix">
              <span>供应商：{{item.supplier_name}}</span>
              <em> ></em>
              <span class="to-buy">立即购买</span>
          </div>
      </div>
    </router-link>
      <div id="cp">
        <router-link to="/ycl_detail" class="product-item cp-item" v-for='item in cp_goods'>
          <div class="product-item-left">
            <div class="img">
              <img :src="base_url+item.original_img" alt="商品图">
              <!-- <span>{{item.goods_name}}</span> -->
            </div>
          </div>
          <div class="product-item-right">
            <h5>{{item.goods_name}}</h5>
            <h6>{{item.goods_remark}}</h6>
            <div class="price clearfix">
              <span class="dj">¥<em>{{item.shop_price}}</em>元/克</span>
              <span class="ls">零售价:<em>￥{{item.market_price}}</em></span>
            </div>
            <div class="other clearfix">
              <span>供应商：{{item.brand_name}}</span>
              <span class="to-buy">立即购买 ></span>
            </div>
          </div>
        </router-link>
      </div>

  </div>
  <p class="tips">没有更多了</p>

</div>

</template>

<script type="text/javascript">
import global from '../global.vue'
import $ from 'jquery'
    export default {
        data(){
          return{
            base_url:global.base_url,
            ycl_goods:[],
            cp_goods:[],
            type:18
          }
        },
        mounted:function(){
          var that = this;
          var type = 18;
          $.ajax({
            url: 'https://m.kjinwang.com/api/Goods/index',
            type: 'GET',
            dataType: 'JSON',
            success: function (res) {
              that.ycl_goods = res.ycl_goods;
              console.log(res)
            },
            fail:function(err){
              // console.log(err)
            }
          });
          $.ajax({
            url: 'https://m.kjinwang.com/api/Goods/get_cp_goods',
            type: 'GET',
            dataType: 'JSON',
            data:{type:type},
            success: function (res) {
              that.cp_goods = res;
              console.log(res)
            },
            fail:function(err){
              // console.log(err)
            }
          });
        },
        methods:{
            getCp:function(item){
              // $('.tab-a').eq(item).addClass('tab-active');
              $('.tab-a').removeClass('tab-active');
              this.type = item;
              this.cp_goods = [];
              var that = this;
              $.ajax({
                url: 'https://m.kjinwang.com/api/Goods/get_cp_goods',
                type: 'GET',
                dataType: 'JSON',
                data:{type:item},
                success: function (res) {
                  that.cp_goods = res;
                  console.log(res)
                },
                fail:function(err){
                  // console.log(err)
                }
              });
            }
        }
    }
</script>

<style src='../assets/css/list.css'>
</style>
